<template>
	<view class="page">
		<view class="content">
			<view class="title">
				我的优势
			</view>
			
			<view class="tips md">
				一句话介绍自己，突出核心优势
			</view>
			
			<view class="area" >
				 <textarea @input="getValue"  maxlength="140" :value='value'/>
			</view>
			
			<view class="length md6Text">
				<text>{{currentLength}}</text>/140
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentLength:7,
			value:'我是一个大笨蛋',
		};
	},

	methods: {
		      getValue: function (e) {
		            console.log(e.detail.value);
				    this.value = e.detail.value;
					this.currentLength = e.detail.value.length;
		        }
	}
};
</script>

<style scoped lang="less">
	
	.page{
		width: 100%;
		border-bottom: 2px solid #e5e5e5;
		
		.content{
			padding: 90upx 68upx 0 68upx;
			
			
			.title{
				font-size: 40upx;
			}
			
			.tips{
				padding-top: 30upx;
			}
			
			.area{
				margin-top: 100upx;
				padding-bottom: 100upx;
				textarea{
					width: 614upx;
					height: 276upx;
					background: #F1F1F1;
					opacity: 0.36;
					border-radius: 8upx;
					padding: 15upx;
					color: #333;
				}
			}
			
			.length{
				border-top: 2upx solid #e5e5e5;
				padding: 30upx 10upx;
			
				
				text-align: right;
				text{
					
					color: #00AAEF;
				}
			}
		}
	}
</style>
